<template>
	<view>
		<view class="pointsHz">
			<view>
				积分个数
			</view>
			<input type="number" v-model="text"/>
			<view class="poin-1">
				<view>总积分：{{ userInfo.user_integral }}</view>
				<view @click="text = userInfo.user_integral">全部兑换</view>
			</view>
		</view>
		<view class="pointsAn" @click="points">确认兑换</view>
		<view class="dis_f">
			<view class="ts">
				注：10%增值积分池，90%到可用余额。
			</view>
			<view @click="jfintegral" class="integral_jf">
				积分明细
			</view>
			
		</view>
		<u-popup v-model="show" mode="center">
			<view class="pointsAnCenter">
				<view class="center-nr">
					<view>本次兑换积分个数为 <text class="colorRed">{{ text }}</text></view>
					<view>总价值为 <text class="colorRed">{{ userInfo.value_added * text }}</text></view>
					<view>须知:10%增值积分池，90%到可用余额</view>
				</view>
				<view class="center-ann">
					<view @click="show = false">取消</view>
					<view class="colorRed" @click="onLihuan">立即兑换</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		data(){
			return {
				show:false,
				text:null
			}
		},
		methods:{
			points(){
				console.log(123456);
				if(this.text == null){
					uni.showToast({
						title:'请输入积分',
						icon:'none'
					})
					return
				}
				this.show = true
			},
			onLihuan(){
				request.post('/user/integralToBalance',{
					integral:this.text
				}).then(res=>{
					this.show = false
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				})
			},
			jfintegral(){
				uni.navigateTo({
					url:'/bundle/pages/user_bill/user_bill?type=user_integral'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.dis_f{
		width: 673rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;
	}
	.colorRed{
		color: #FF584D;
	}
	.ts{
		width: 578rpx;
		margin: 0 auto;
		font-size: 23rpx;
	}
	.integral_jf{
		width: 673rpx;
		
		text-align: right;
		margin: 0 auto;
		
		font-size: 24rpx;
	}
	.pointsAnCenter{
		width: 509rpx;
		height: 270rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.center-nr{
			padding: 45rpx 32rpx 0 32rpx;
			font-size: 26rpx;
			line-height: 1.8;
			margin-bottom: 12rpx;
			:nth-child(3){
				font-size: 20rpx;
			}
		}
		.center-ann{
			display: flex;
			justify-content: space-between;
			border-top: 2rpx solid #e5e5e5;
			height: 89rpx;
			view{
				width: 50%;
				text-align: center;
				line-height: 89rpx;
			}
			:nth-child(1){
				border-right: 2rpx solid #e5e5e5;
			}
		}
	}
	.pointsHz{
		width: 673rpx;
		height: 264rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 21rpx;
		margin-top: 70rpx;
		padding: 27rpx;
		margin-bottom: 56rpx;
		input{
			width: 620rpx;
			border-bottom: 2rpx solid #e5e5e5;
			height: 120rpx;
		}
		.poin-1{
			display: flex;
			justify-content: space-between;
			line-height: 4;
			font-size: 24rpx;
			color: #FF584D;
			:nth-child(1){
				color: #999999 !important;
			}
		}
	}
	.pointsAn{
		width: 673rpx;
		height: 82rpx;
		background: #FF584D;
		border-radius: 41rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 82rpx;
		text-align: center;
		margin: 0 auto;
	}
</style>